<template>
	<view>
		<u-loading-page :loading="load" v-if="load"></u-loading-page>
		<view class="content" v-else>
			<view class="herder">
				<u-navbar title="提交订单"
				 :placeholder="true" :autoBack="true" 
				 bgColor="transparent" leftIconColor='#fff'
				 :titleStyle="{ color: '#FFF'}">
				</u-navbar>
			</view>
			<!-- 头部切换栏 -->
			<view class="card-how">
				<view class="card-tabs">
					<view :class="{ Selected: isPickup, onSelected: !isPickup,noadd: !isPickup }">配送上门
					</view>
					<view :class="{ Selected: !isPickup, onSelected: isPickup }">到店自提</view>
				</view>
				<view class="card-list">
					<view class="card-list-box" v-if="isPickup" style="height: 100%;">
						<view class="home-item" @click="reviseadd">{{orderInfo.address.detail || '前往请添加配送信息'}}
							<text class="iconfont icon-jinrujiantouxiao"></text>
						</view>
						<view class="user-item">
							{{orderInfo.address.name || 'XX'}}<text>先生</text>{{orderInfo.address.phone}}</view>
						<view class="time-item">
							<text>立即送出</text>
							<view style="color: #025E21;">约40分钟 <text class="iconfont icon-jinrujiantouxiao"></text>
							</view>
						</view>
					</view>
					<view class="card-list-box" v-else>
						<view class="home-item">内江市经济产业园6楼5号门
							<text class="iconfont icon-jinrujiantouxiao"></text>
						</view>
						<view class="option-box">
							<view class="option-item">
								<image src="../static/nei.png"></image>
								<view class="option-rigth">食堂<text style="font-size: 20rpx;">店内用餐</text></view>
							</view>
							<view class="option-item">
								<image src="../static/zhi.png"></image>
								<view class="option-rigth">外带<text style="font-size: 20rpx;">店内自取</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card-content">
				<view class="card-variety">
					<view v-for="item in orderInfo.goods" :key="item.store_id">
						<!-- 商家展示 -->
						<view class='card-head'>
							<view class="variety-left">
								<view class="conter">
									<view>{{item.store_name}}</view>
								</view>
							</view>
							<text class="iconfont icon-jinrujiantouxiao"></text>
						</view>
						<!-- 购买商品展示 -->
						<scroll-view :class="{shoph:isShow}">
							<view class="shopping" v-for="el in item.goods" :key="el.id">
								<view>
									<image :src="el.image"></image>
								</view>
								<view class="center">
									<view class="top">
										<view class="top-title">{{el.name}}</view>
										<view class="zhe">新</view>
									</view>
									<view class="notes">1人份 | 炒菜</view>
									<view class="footer">
										<view class="number">x{{el.number}}</view>
										<view class="price">
											<text style="text-decoration:line-through;margin-top: 2rpx;"
												v-if="false">￥69.90</text>
											<text style="color: #cc0022;margin-left: 18rpx;">￥</text>
											<text class="jiage">{{el.sales_price}}</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="loadmore" v-if="item.goods.length>=3" @click="loadmore">
						 <u-icon :name="isShow?'arrow-down':'arrow-up'" color="#025E21">
						 </u-icon> {{text}}</view>
					</view>
				</view>
				<ExpendIture :orderInfo="orderInfo"></ExpendIture>
				<view class="card-notes">
					<view style="margin-bottom: 10rpx;"><text>备注</text></view>
					<u--textarea v-model="remark" 
					placeholder="请填写商品或配送的需要..." count
					placeholder-style="color: #000"
					></u--textarea>
				</view>
			</view>
			<view class="payment-footer">
				<view class="payment-left">
					待支付:<text>￥{{orderInfo.total_amount}}</text>
				</view>
				<view class="tijiaoabtn" @click="submitbtn">提交订单</view>
			</view>
		</view>
		<u-toast ref="ofmToast"></u-toast>
	</view>
</template>

<script>
	import expenditure from '../components/expenditure.vue'
	import {Toast} from 'uview-ui'
	import {
		preorder,
		suborder
	} from '@/api/place.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				isPickup: true,
				load: true,
				orderInfo: {},
				remark: '',
				commodityinfo: {},
				params: {},
				text: '展开',
				isShow: true
			}
		},
		components: {
			ExpendIture: expenditure
		},
		computed: {
			...mapState(['openid', 'odas'])
		},
		methods: {
			...mapMutations(['emptymoney']),
			togglePickup() {
				this.isPickup = !this.isPickup;
			},
			//预下单
			async preorderapi() {
				const res = await preorder(this.commodityinfo.type,
					{
						goods: this.commodityinfo.goods,
						address_id:this.commodityinfo.address_id
					})
				this.orderInfo = res.data
				this.load = false
			},
			reviseadd() {
				if (this.orderInfo.address === {}) {
					uni.navigateTo({
						url: '/page_my/my-address/addaddress'
					})
				} else {
					uni.navigateTo({
						url: "/page_my/my-address/index?type=revise"
					})
				}
			},
			//提交订单
			async soonapi() {
				this.$refs.ofmToast.show({
					type: 'loading',
					title: '正在加载',
					message: "正在加载",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
					duration:2000
				})
				const {
					data
				} = await suborder(this.commodityinfo.type,
					{
						goods: this.commodityinfo.goods,
						address_id: this.orderInfo.address.id,
						remark: this.remark,
						openid: this.openid
					} )
				this.params = data.params
				this.load = false
			},
			//挂起支付
			async submitbtn() {
				if (!this.orderInfo.address) return this.$refs.ofmToast.show({
					message: "请选择收货地址",
					icon: 'error'
				})
				await this.soonapi()
				const totalAmount = this.orderInfo.total_amount
				uni.requestPayment({
					...this.params,
					success(res) {
						uni.redirectTo({
							url: '/page_ orderform/paysuccess?pay=' + totalAmount
						})
					},
					fail(err) {
						uni.switchTab({
							url: '/pages/orders/orders'
						})
						uni.showToast({
							title: '取消支付',
							icon: 'error'
						})
					}
				})
				this.emptymoney()
			},
			loadmore() {
				this.isShow = !this.isShow
				if (!this.isShow) {
					this.text = '收起'	
				} else {
					this.text = '展开'
				}
			}
		},
		watch: {
			odas(newVal,_) {
				console.log(12313);
				this.commodityinfo.address_id = newVal
				this.preorderapi()
			}
		},
		onLoad(item) {
			this.commodityinfo = JSON.parse(item.info)
			this.preorderapi()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}
	.content{
		padding-bottom: 60rpx;
	}
	.icon-jinrujiantouxiao {
		font-size: 22rpx;
		color: #999999;
		margin-left: 40rpx;
	}

	.herder {
		padding: 0 40rpx;
		height: 360rpx;
		background: linear-gradient(180deg, #00A537 0%, #FAFAFA 100%);
	}

	.card-how {
		width: 670rpx;
		height: 300rpx;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 20rpx;
		transform: translateY(-170rpx);

		.card-tabs {
			display: flex;
			font-size: 26rpx;
			align-items: flex-end;

			.Selected {
				width: 355rpx;
				height: 84rpx;
				text-align: center;
				line-height: 90rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #fff;
				z-index: 9;
			}

			.onSelected {
				color: #066926;
				width: 335rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				border-radius: 0 20rpx 0 20rpx;
				background-color: rgba(76, 192, 115, 0.4);
				z-index: 9;
			}

			.noadd {
				border-radius: 20rpx 0 20rpx 0;
			}
		}

		.card-list {
			height: 160rpx;
			background-color: #fff;
			transform: translateY(-68rpx);
			border-radius: 20rpx;
			padding: 90rpx 40rpx;
			padding-bottom: 20rpx;

			.card-list-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.option-box {
					display: flex;
					justify-content: space-between;
					margin-top: 40rpx;

					.option-item {
						display: flex;
						padding: 14rpx 20rpx;
						border: 1px solid #999999;
						border-radius: 20rpx;

						image {
							border-radius: 10rpx;
							width: 60rpx;
							height: 60rpx;
						}

						.option-rigth {
							font-size: 22rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							margin-left: 10rpx;
						}
					}
				}

				.home-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.user-item {
					font-size: 24rpx;
					color: #999999;

					text {
						margin: 0 40rpx 0 10rpx;
					}
				}

				.time-item {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}

	.card-content {
		padding: 0 40rpx;

		.card-variety {
			padding: 14rpx 28rpx 16rpx 24rpx;
			// height: 620rpx;
			background-color: #fff;
			transform: translateY(-160rpx);
			border-radius: 20rpx;

			.card-head {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				justify-content: space-between;
				border-bottom: 1px dashed #E6E6E6;
			}

			.shoph {
				height: 450rpx;
				overflow: hidden;
			}
			.loadmore{
				display: flex;
				justify-content: center;
				color: #025E21;
				margin-top: 10rpx;
				font-size: 28rpx;
			}
			.shopping {
				display: flex;
				margin-top: 20rpx;

				image {
					width: 200rpx;
					height: 170rpx;
				}

				.center {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 30rpx;
					width: 100%;

					.top {
						font-size: 32rpx;
						display: flex;
						align-items: center;

						.top-title {
							width: 80%;
						}

						.zhe {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background-color: #025E21;
							font-size: 14rpx;
							color: #fff;
							text-align: center;
							line-height: 30rpx;
							margin-left: 10rpx;
						}
					}

					.notes {
						font-size: 26rpx;
						font-weight: 400;
						line-height: 28rpx;
						text-align: left;
						color: #999999;
					}

					.footer {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.number {
							font-size: 26rpx;
							color: #999999;
						}

						.price {
							margin-bottom: 4rpx;
							display: flex;
							align-items: center;

							text {
								color: #999999;
								font-size: 24rpx;
							}

							.jiage {
								font-size: 38rpx;
								color: #CC0022;
								margin-right: 28rpx;
							}
						}
					}
				}
			}
		}

		.card-cost {
			transform: translateY(-140rpx);
		}

		.card-notes {
			padding: 22rpx 27rpx;
			background-color: #fff;
			border-radius: 20rpx;
			transform: translateY(-120rpx);
			font-size: 30rpx;
		}
	}

	.payment-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		height: 160rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 14rpx 40rpx;

		.payment-left {
			text {
				color: #C02;
				font-size: 40rpx;
			}
		}

		.tijiaoabtn {
			font-size: 28rpx;
			color: #fff;
			width: 300rpx;
			height: 68rpx;
			text-align: center;
			line-height: 68rpx;
			background-color: #025E21;
			border-radius: 68rpx;
		}
	}
</style>